<template>
    <div>
        <div class="flex">
            <el-input class="w-[200px] mr-2" v-model="input" placeholder="请输入入栈的值" />
            <el-button
                type="primary"
                @click="pushValue"
                :disabled="stack.value.length >= stack.size"
                >入栈</el-button
            >
            <el-button
                type="primary"
                @click="pop"
                :disabled="stack.value.length === 0"
                >出栈</el-button
            >
        </div>
        <div class="mt-2">
            <el-input class="w-[200px] mr-2" v-model="stackSize" placeholder="请输入栈大小" />
            <el-button
                type="primary"
                @click="resetStack"
                :disabled="stack.value.length >= stack.size"
                >重置</el-button
            >
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { push, pop, stack,initStack } from './core'
import { ElMessage } from 'element-plus'

const input = ref('')
const stackSize = ref(10)

const pushValue = () => {
    if (!input.value) {
        ElMessage.warning('请输入要入栈的值')
    }
    push(input.value)
    input.value = ''
}

initStack(10)

const resetStack = () => {
    if (isNaN(stackSize.value)) {
        ElMessage.warning('请输入正确的栈大小')
    }
    initStack(stackSize.value)
}
</script>

<style scoped></style>
